<template>
<view style="height: 100vh;">
<layout index="/pages/scm/index/index">
  <view class="carbon-container">
    <!-- 查询表单 -->
    <van-collapse :value="showSearch ? ['search'] : []">
      <van-collapse-item title="筛选条件" name="search">
        <van-form @submit="handleQuery">
          <van-field
            v-model="queryParams.contractNo"
            label="合同编号"
            label-width="4em"
            placeholder="请输入合同编号"
            clearable
          />
          <van-field
            name="customer"
            label="客户"
            label-width="4em"
          >
            <template #input>
              <van-dropdown-menu active-color="#2a9d8f">
                <van-dropdown-item
                  v-model="queryParams.customerId"
                  :options="customerOptions"
                />
              </van-dropdown-menu>
            </template>
          </van-field>
          <van-field
            name="year"
            label="年份"
            label-width="4em"
          >
            <template #input>
              <van-datetime-picker
                v-model="queryParams.contractYear"
                type="year"
                title="选择年份"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="confirmYear"
                :formatter="formatter"
              />
            </template>
          </van-field>
          <view class="form-buttons">
            <van-button 
              round 
              type="primary" 
              color="#76c893"
              native-type="submit"
            >搜索</van-button>
            <van-button 
              round 
              plain 
              color="#76c893"
              @click="resetQuery"
            >重置</van-button>
          </view>
        </van-form>
      </van-collapse-item>
    </van-collapse>
    <!-- 统计切换 -->
    <van-tabs 
      v-model:active="activeTab"
      title-active-color="#2a9d8f"
      color="#a8dacc"
    >
      <van-tab title="季度统计">
        <scroll-view scroll-x class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">季度</text>
              <text class="header-item">合同编号</text>
              <text class="header-item">客户名称</text>
              <text class="header-item">已收款</text>
            </view>
            <view 
              v-for="(item, index) in quarterData"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.quarter }}</text>
              <text class="row-item">{{ item.contractNo }}</text>
              <text class="row-item">{{ item.customer }}</text>
              <text class="row-item amount">¥{{ item.amount }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
      <van-tab title="月份统计">
        <scroll-view scroll-x class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">月份</text>
              <text class="header-item">合同编号</text>
              <text class="header-item">客户名称</text>
              <text class="header-item">已收款</text>
            </view>
            <view 
              v-for="(item, index) in monthData"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.month }}</text>
              <text class="row-item">{{ item.contractNo }}</text>
              <text class="row-item">{{ item.customer }}</text>
              <text class="row-item amount">¥{{ item.amount }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
    </van-tabs>
    <!-- 空状态 -->
    <van-empty
      v-if="quarterData.length === 0 && monthData.length === 0"
      description="暂无数据"
      image="/static/empty.png"
    />
  </view>
</layout>
</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 查询参数
const queryParams = reactive({
  contractNo: '',
  customerId: '',
  contractYear: new Date().getFullYear()
});

// 模拟客户数据
const customerOptions = ref([
  { text: '全部客户', value: '' },
  { text: '碳中和科技', value: 1 },
  { text: '绿色能源公司', value: 2 },
  { text: '环保材料集团', value: 3 }
]);

// 模拟季度数据
const quarterData = ref([
  {
    quarter: '2023-Q1',
    contractNo: 'HT-2023-001',
    customer: '碳中和科技',
    amount: '158,000.00'
  },
  // 更多数据...
]);

// 模拟月度数据
const monthData = ref([
  {
    month: '2023-01',
    contractNo: 'HT-2023-001',
    customer: '碳中和科技',
    amount: '58,000.00'
  },
  // 更多数据...
]);

// 时间处理
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);

const formatter = (type, val) => type === 'year' ? `${val}年` : val;

// 确认年份选择
const confirmYear = (value) => {
  queryParams.contractYear = value.getFullYear();
};

// 查询处理
const handleQuery = () => {
  // 过滤逻辑示例
  const filterQuarter = queryParams.customerId 
    ? quarterData.value.filter(item => item.customerId === queryParams.customerId)
    : quarterData.value;
  quarterData.value = filterQuarter;
};

// 重置查询
const resetQuery = () => {
  queryParams.contractNo = '';
  queryParams.customerId = '';
  queryParams.contractYear = new Date().getFullYear();
};
</script>

<style lang="scss">
.carbon-container {
  background-color: #f5fbf8; /* 页面背景色 */
  min-height: 100vh;
  padding: 20rpx;

  .carbon-table {
    min-width: 1200rpx;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.1);

    .table-header {
      background-color: #2a9d8f; /* 表头背景色 */
      padding: 24rpx;
      display: flex;

      .header-item {
        flex: 1;
        min-width: 200rpx;
        text-align: center;
        color: #fff; /* 表头文字颜色 */
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .table-row {
      display: flex;
      padding: 24rpx;
      transition: all 0.3s;

      .row-item {
        flex: 1;
        min-width: 200rpx;
        text-align: center;
        font-size: 26rpx;
        color: #2a5d52; /* 表格内容文字颜色 */

        &.amount {
          color: #76c893; /* 金额文字颜色 */
          font-weight: 500;
        }
      }

      &:active {
        background-color: #e8f5f2; /* 点击时的背景色 */
      }
    }

    .bg-even {
      background-color: #fff; /* 偶数行背景色 */
    }

    .bg-odd {
      background-color: #f8fcfb; /* 奇数行背景色 */
    }
  }

  .form-buttons {
    padding: 30rpx 0;
    display: flex;
    justify-content: space-around;

    .van-button {
      width: 200rpx;
    }
  }

  .table-scroll {
    height: calc(100vh - 400rpx);
    overflow-x: auto;
  }
}
</style>